<template>
  <div>
    <el-tabs type="border-card" v-model="activeName">
      <!-- 商品资料 -->
      <el-tab-pane label="商品资料" name="first">
        <el-menu
          :default-active="listQuery2.tab"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect">
          <el-menu-item index="my">我的</el-menu-item>
          <el-menu-item index="all">全部</el-menu-item>
        </el-menu>
        <div class="app-container customer-div">
          <!--数据列表-->
          <div class="table-container" style="margin-top: 0">
            <vxe-grid
              ref="xGrid"
              v-bind="gridOptions"
              size="mini"
              :loading="listLoading"
              @checkbox-change="checkboxChange"
              @checkbox-all="selectAllCheckboxChange"
            >
              <template #form>
                <!--搜索-->
                <div>
                  <div
                    style="
                          background: #f5f7fa;
                          padding: 15px 15px 0 15px;
                          border: 1px solid #ebeef5;
                          border-bottom: 0.5px solid #ebeef5;
                        "
                  >
                    <el-form
                      :inline="true"
                      :model="listQuery2"
                      size="mini"
                      label-width="100px"
                    >
                      <el-form-item label="关键字：">
                        <el-input
                          placeholder="请输入牌号关键字"
                          v-model="listQuery2.keywords"
                          clearable
                        ></el-input>
                      </el-form-item>

                      <el-form-item label="品名：">
                        <el-input
                          v-model="listQuery2.categoryName"
                          clearable
                        ></el-input>
                      </el-form-item>

                      <el-form-item label="是否允许下单：">
                        <el-select v-model="listQuery2.isEnableOrder "  placeholder="请选择" clearable>
                          <el-option key="1" label="正常下单" value="1"></el-option>
                          <el-option key="0" label="禁止下单" value="0"></el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item label="是否商城订单：">
                        <el-select v-model="listQuery2.isMallGoodsSn"  placeholder="请选择" clearable>
                          <el-option key="1" label="是" value="1"></el-option>
                          <el-option key="0" label="否" value="0"></el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item>
                        <el-button
                          @click="handleSearchList()"
                          type="primary"
                        >
                          查询
                        </el-button>
                        <el-button @click="editGoods(null)" type="primary">
                          新增
                        </el-button>
                        <el-button @click="changeMoreType(1)" type="success" :loading="btnloading1">
                          批量允许下单
                        </el-button>
                        <el-button @click="changeMoreType(0)" type="danger" :loading="btnloading2">
                          批量禁止下单
                        </el-button>
                        <!-- <el-button @click="pullSAPGoods()" type="primary">
                         SAP同步
                       </el-button> -->
                        <!-- <el-button @click="bulkEditing()" type="primary">
                          批量修改
                        </el-button> -->
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
              </template>
              <template #toolbar_buttons>
                <el-radio-group
                  v-model="listQuery2.isEnable"
                  size="small"
                  @change="handleSearchList()"
                >
                  <el-radio-button :label="1">正常</el-radio-button>
                  <el-radio-button :label="0">已禁用</el-radio-button>
                </el-radio-group>
              </template>
              <template #pager>
                <div style="overflow: hidden">
                  <div class="pagination-container" style="float: right">
                    <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      layout="total, sizes,prev, pager, next,jumper"
                      :current-page.sync="listQuery2.pageNum"
                      :page-size="listQuery2.pageSize"
                      :page-sizes="[10, 15, 20, 50, 100, 200]"
                      :total="count"
                    >
                    </el-pagination>
                  </div>
                </div>
              </template>

              <template #num1_default="{ row, rowIndex }">
                <el-link
                  @click="toDetail(row)"
                  type="primary"
                  style="font-size: 12px"
                >{{ row.orderSn }}</el-link
                >
              </template>
              <template #num2_default="{ row, rowIndex }">
                <span> {{ row.isEnable | filterEnable }} </span>
              </template>

              <template #isEnableOrder="{ row, rowIndex }">
                <span> {{ row.isEnableOrder == 1 ? '正常下单' : '禁止下单' }} </span>
              </template>

              <template #isMallGoodsSn = "{ row, rowIndex }">
                <span> {{ row.isMallGoodsSn == 1 ? '是' : '否' }} </span>
              </template>

              <template #num3_default="{ row, rowIndex }">
                <el-button
                  type="text"
                  size="small"
                  @click="editGoods(row)"
                >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="changeisEnable(row)"
                >{{ row.isEnable == 1 ? '禁用' : '启用' }}</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="changeType(row,  'isEnableOrder')"
                >{{ row.isEnableOrder == 1 ? '禁止下单' : '允许下单' }}</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="changeType(row,  'isMallGoodsSn')"
                >{{ row.isMallGoodsSn == 1 ? '取消商城订单牌号' : '设置商城订单牌号' }}</el-button>
              </template>
              <!-- <template #num4_default="{ row, rowIndex }">
                <span> {{ row.isNeedPush == 1 ? "同步" : "未同步" }} </span>
              </template> -->
              <!-- <template #num5_default="{ row, rowIndex }">
                <span
                v-if="row.gxParentCategoryName">
                {{ row.gxParentCategoryName }}/{{row.gxCategoryName}}/{{ row.gxBrandName }}/{{ row.gxGoodsSn }}
                </span>
              </template> -->
            </vxe-grid>
          </div>

          <!--编辑商品-->
          <addGoods ref="addGoods" @update="getListData"></addGoods>
          <!-- 商品物料批量设置 -->
          <!-- <bulkEdit ref="bulkEdit" @update="handleSearchList"></bulkEdit> -->
        </div>
      </el-tab-pane>
      <!--基础信息维护-->
      <el-tab-pane label="基础信息维护" name="third" v-if="goodsBaseInfoService">
        <baseseting ref="baseseting"></baseseting>
      </el-tab-pane>
      <!-- 产品线团队设置 -->
<!--      <el-tab-pane label="产品线团队设置" name="second">-->
<!--        <teamSetup ref="teamSetup"></teamSetup>-->
<!--      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script>
import {
  goodsSortList,
  getMaterialList,
  getMCategoryList,
  importSAPGoods,editMaterialEnable
} from "@/api/allInLine/goods";
import { formatDate } from "@/utils/date";
// 产品线团队设置
import teamSetup from "./InquiryCom/teamSetup.vue";
import addGoods from "./InquiryCom/addGoods";
import baseseting from './InquiryCom/baseseting'
// import bulkEdit from "./InquiryCom/bulkEdit.vue";
import store from "@/store";
import { mapGetters } from "vuex";
import { Message } from "element-ui";

const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  supplierId: "",
  contactName: "",
  inquiryDate: null,
  goodsKingId: "",
  createUserId: "",
  tab: "today",
};
const defaultListQuery2 = {
  categoryName: "", //品名
  keywords: "", //关键词
  pageSize: 10,
  pageNum: 1,
  tab:'my',
  isMallGoodsSn:'',
  isEnableOrder:'',
  isEnable:1
};
export default {
  name: "index",
  data() {
    return {
      activeName: "first",
      // goodSortList: [],
      roles: store.getters.roles ? store.getters.roles : [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      listQuery2: JSON.parse(JSON.stringify(defaultListQuery2)),
      count: 0,
      chooseName: "",
      listLoading: false,
      value: true,
      loading: false,
      loading2: false,
      supplierList2: [],
      options: [],
      type: 1,
      gridOptions: {
        loading: this.listLoading,
        border: true,
        id: "goodsInformation",
        align: "center",
        autoResize: true,
        minHeight:300,
        size: "mini",
        rowConfig: {
          keyField: "goodsSnId",
          isHover: true,
        },
        columnConfig: {
          resizable: true,
        },
        customConfig: {
          storage: true,
        },
        checkboxConfig: {
          reserve: true,
        },
        toolbarConfig: {
          zoom: true,
          custom: true,
          slots: {
            buttons: 'toolbar_buttons',
          }
        },
        columns: [
          {
            field: "",
            title: "",
            width: 100,
            type: "checkbox",
          },
          {
            field: "materialId",
            title: "编号",
            width: 100,
          },
          {
            field: "categoryName",
            title: "品名分组",
            width: 100,
          },
          {
            field: "goodsSn",
            title: "牌号",
            width: 150,
          },
          {
            field: "moreSuGoodsSn",
            title: "平台牌号",
            width: 150,
          },
          {
            field: "brandName",
            title: "厂家",
            width: 100,
          },
          {
            field: "goodsName",
            title: "关联平台商品信息",
            width: 150,
          },
          {
            field: "isEnableOrder",
            title: "是否允许下单",
            width: 150,
            slots: {
              default: "isEnableOrder",
            },
          },
          {
            field: "isMallGoodsSn",
            title: "是否商城订单牌号",
            width: 150,
            slots: {
              default: "isMallGoodsSn",
            },
          },
          // {
          //   field: "sapGoodsNumber",
          //   title: "内部编号",
          //   width: 100,
          // },
          // {
          //   field: "gxGoodsSnId",
          //   title: "广选牌号",
          //   width: 180,
          //   slots: {
          //     default: "num5_default",
          //   },
          // },
          {
            field: "chargeUserName",
            title: "负责人",
            width: 100,
          },
          {
            field: "assistUserName",
            title: "协助人",
            width: 100,
          },
          {
            field: "lastUserName",
            title: "总负责人",
            width: 100,
          },
          {
            field: "minProfit",
            title: "最低毛利",
            width: 150,
          },
          {
            field: "normProfit",
            title: "指导毛利",
            width: 150,
          },
          {
            field: "goodsWeight",
            title: "包装(吨/包)",
            width: 150,
          },
          {
            field: "buyMinNum",
            title: "起订数量(吨)",
            width: 150,
          },
          // {
          //   field: "isNeedPush",
          //   title: "同步状态",
          //   width: 100,
          //   slots: {
          //     default: "num4_default",
          //   },
          // },
          // {
          //   field: "isEnable",
          //   title: "状态",
          //   width: 100,
          //   slots: {
          //     // 使用插槽模板渲染
          //     default: "num2_default",
          //   },
          // },
          {
            field: "",
            title: "操作",
            width: 150,
            fixed: "right",
            slots: {
              // 使用插槽模板渲染
              default: "num3_default",
            },
          },
        ],
        data: [{}],
      },
      data: [],
      // data2: [],
      props: {
        label: "categoryName",
        children: "children",
      },
      dataLoading: false,
      records:[],
      btnloading1:false,
      btnloading2:false
    };
  },
  computed: {
    ...mapGetters(["name", "mobile", "userId"]),
    goodsBaseInfoService(){
      if(this.roles.indexOf("goodsBaseInfoService") != -1){
        return true
      }else{
        return false
      }
    },
  },
  created() {
    this.getListData();
    this.getFenzuList();
    // this.getSortList();
  },
  components: {
    addGoods,
    // addGroup,
    // bulkEdit,
    teamSetup,
    baseseting
  },
  filters: {
    formatTime(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
    filterEnable(value) {
      if (value == 1) {
        return "正常";
      } else if (value == 0) {
        return "禁用";
      }
    },
  },
  methods: {
    checkboxChange() {
      this.records = this.$refs.xGrid.getCheckboxRecords();
    },
    selectAllCheckboxChange(checked) {
      this.records = checked.records;
    },
    changeMoreType(isEnableOrder){
      if (this.records.length <= 0) {
        this.$message.error("请勾选需要操作的记录");
        return false
      }
      if(isEnableOrder == 1){
        this.btnloading1 = true
      }else{
        this.btnloading2 = true
      }
      let data = {}
      let goodsSnId = this.records.map(item=>item.goodsSnId)
      data.goodsSnId = goodsSnId.join(",");
      data.isEnableOrder = isEnableOrder
      editMaterialEnable(data).then(()=>{
        this.getListData()
        this.btnloading1 = false
        this.btnloading2 = false
        this.$message.success('操作成功！')
      })
    },
    handleSelect(key){
      this.listQuery2 = JSON.parse(JSON.stringify(defaultListQuery2)),
      this.listQuery2.tab = key;
      this.handleSearchList()
    },
    changeisEnable(item){
      editMaterialEnable({goodsSnId:item.goodsSnId,isEnable:item.isEnable == 1 ? 0 : 1}).then(()=>{
        this.getListData()
        this.$message.success('操作成功！')
      })
    },
    changeType(item,type){
      let data = {}
      data.goodsSnId = item.goodsSnId;
      if(type=='isEnableOrder'){
        data.isEnableOrder = item.isEnableOrder == 1 ? 0 : 1;
      }else if(type=='isMallGoodsSn'){
        data.isMallGoodsSn = item.isMallGoodsSn == 1 ? 0 : 1;
      }
      editMaterialEnable(data).then(()=>{
        this.getListData()
        this.$message.success('操作成功！')
      })
    },
    // tab切换
    // handleClick(event) {
      // if(event.name=='first'){
      //   this.getListData();
      //   this.getFenzuList();
      // }else if(event.name=='second'){
      //   this.$refs.teamSetup.getGoodsLineList()
      // }
    // },
    // SAP同步成功
    pullSAPGoods() {
      importSAPGoods().then((res) => {
        Message.success("金蝶同步成功");
        this.handleSearchList();
      });
    },

    // 批量修改
    // bulkEditing() {
    //   this.$refs.bulkEdit.showPop();
    // },

    // 获取商品分类
    // getSortList() {
    //   goodsSortList().then((res) => {
    //     this.goodSortList = res;
    //   });
    // },

    // addGroupFn(type, item) {
    //   this.$refs.addGroup.showPop(item);
    // },
    //树结构点击时
    nodeClick(data) {
      this.listQuery2.categoryName = this.chooseName = data;
      this.listQuery2.pageNum = 1;
      this.getListData();
    },
    // 获取分组列表
    getFenzuList() {
      this.dataLoading = true;
      getMCategoryList().then((res) => {
        this.data = res;
        this.dataLoading = false;
        // this.data2 = [];
        // this.data2 = this.forTree(this.data);
      });
    },

    //获取品名列表
    // getBuMenList() {
    //   this.dataLoading = true;
    //   getDeptList().then((res) => {
    //     this.data = res;
    //     this.data2 = [];
    //     this.data2 = this.forTree(this.data);
    //     this.dataLoading = false;
    //   });
    // },

    //去除不要的children
    forTree(list) {
      let newList = list;
      if (newList.length) {
        for (let i = 0; i < newList.length; i++) {
          if (newList[i].children && newList[i].children.length > 0) {
            this.forTree(newList[i].children);
          } else {
            delete newList[i].children;
          }
        }
        return newList;
      }
    },

    //编辑商品
    editGoods(item) {
      this.$refs.addGoods.showPop(item);
    },
    handleSearchList() {
      this.listQuery2.pageNum = 1;
      this.chooseName = this.listQuery2.categoryName;
      this.getListData();
    },
    //获取列表
    getListData() {
      this.listLoading = true;
      this.records = [];
      setTimeout(() => {
        this.$refs.xGrid.clearCheckboxRow();
      }, 500);
      let data = JSON.parse(JSON.stringify(this.listQuery2));
      getMaterialList(data)
        .then((res) => {
          this.gridOptions.data = res.list;
          this.count = res.count;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    handleSizeChange(val) {
      this.listQuery2.pageNum = 1;
      this.listQuery2.pageSize = val;
      this.getListData();
    },
    handleCurrentChange(val) {
      this.listQuery2.pageNum = val;
      this.getListData();
    },
  },
};
</script>

<style scoped lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding: 10px;
  .el-tree-node__content {
    line-height: 30px;
  }
}
.custom-tree-node.choose {
  background-color: #f0f7ff;
}
.custom-tree-node:hover {
  background-color: #f8f8f8;
}
</style>
